<template>
    <div>
        <!-- <soltCom title="导航栏">
            绑定子组件中的v-slot:
            <template v-slot:home>
                首页
            </template>
            <div>
                666 内容 666
            </div>
            <template v-slot:footer>
                底部 
            </template>
            <div>
                多出的内容 666 {{ nickName }}
            </div>
        </soltCom> -->
        <!-- <todo-parent 
            v-model="value" 
            :list="list"
            @submit="Submit()"
            @del="del"
            @clear="clearBoth()"
            @changeStatus="changeStatus">
            <template v-for="(item,index) in list" >
               <todo-child
                v-if="
                    status === 'all' ||
                    (status === 'active' && item.checked === false) ||
                    (status === 'completed' && item.checked === true)
                "
                :key="item.id"
                v-model="item.checked"
                :title="item.title"
                :index="index"
                />
            </template>
        </todo-parent> -->
        <!-- <inputTab 
            :typeText="inputText" 
            @change="inputText === 'password' ? inputText = 'text' : inputText = 'password'"/>
        <progress-tag 
            :width="styles + '%'"
            @change="progressChange"
            /> -->

            <steps 
            :index="stepsIndex"
            @change="stepsChange"/>
    </div>
</template>
<script>
// 导入插槽组件
// import soltCom from '@/components/vue组件/6.组件的插槽.vue'
import todoParent from '@/components/homework/todoList/todoParent.vue'
// 引入
import todoChild from '@/components/homework/todoList/todoChild.vue'
import inputTab from '@/components/homework/inputTab.vue';
import progressTag from '@/components/homework/progress.vue';

import steps from '@/components/homework/steps.vue';
export default {
    methods:{
        stepsChange(){
            if(this.stepsIndex === 4){
                this.stepsIndex = -1
            }else{
                this.stepsIndex ++
            }
        },
        progressChange(type){
            if(type === 'add'){
                if(this.styles === 100){    
                    this.styles = 0
                }
                this.styles += 10;
            }else{
                if(this.styles === 0){
                    return
                }
                this.styles -= 10;
            }
        },
        changeStatus(val){
            // console.log(val);
            this.status = val;
        },
        clearBoth(){
            // 过滤
            this.list = this.list.filter(item => item.checked == false);
        },
        del(index){
            this.list.splice(index,1)
        },
        Submit(){
            // console.log(this.value);
            // 在父组件中判断this.value值是否合法
            if(this.value){
                // 给列表加数据
                this.list.push({
                    id: this.list.length == 0 ? 1 :
                    this.list[this.list.length-1].id + 1,
                    title: this.value,
                    checked: false
                })
                // 清空输入框
                this.value = '';
            }
        }
    },
    data() {
        return {
            inputText: 'password',
            styles: 100,
            stepsIndex:-1,

            value: '',
            list: [],
            status: 'all'
        }
    },
    components: {
        todoParent,
        todoChild,
        inputTab,
        progressTag,
        steps
        // soltCom
    },
    // data() {
    //     return {
    //         nickName: '小绿'
    //     }
    // },
}
</script>
<style>
    *{
        margin: 0;
    }
</style>